<template>
<el-container style="background-color: #409EFF;height=60vh ">
  <el-header style="height:8rem">
    <div class="content-box">
      <div style="height:100%;display:flex;">
        <span style="margin: 0 auto; position: relative;top:20%;">版权登记</span>
        <span style="margin: 0 auto; position: relative;top:10%; font-size:36px" >申请管理系统</span>
        <span style="margin: 0 auto; position: relative;left: 70%;margin-top:16px ">广州冉冉文化艺术交流策划有限公司</span>
        <div style="align-self:flex-end;display:flex;justify-content: flex-start">
          <el-tag style="margin-bottom:-1px;margin-right:1rem" size='medium ' @click="component = 3">软件著作版权</el-tag>
          <el-tag  style="margin-bottom:-1px" size='medium ' @click="component = 4">外观专利版权</el-tag>
      </div>
      </div>
      
    </div>
  </el-header>
  <el-container>
    <el-aside width="200px">
      <div style="margin: 0 auto; position: relative;top:5%;" class='content-aside'> 
          <el-tag style="align-self:flex-end;margin-top:15px;margin-right:-2px" @click="component = 1" size='medium '>会员管理</el-tag>
          <el-tag style="align-self:flex-end;margin-top:15px;margin-right:-2px" @click="component = 2" size='medium '>提交专利</el-tag>
          <el-tag style="align-self:flex-end;margin-top:15px;margin-right:-2px" size='medium' @click="close"> 退出系统</el-tag>
      </div>
    </el-aside>
    <el-main>
      <div v-show="component == 1">
        <Userx ></Userx>
      </div>
      <div  v-show="component == 2">
        <Zhuanli ></Zhuanli>
      </div>
      <div  v-show="component == 3">
        <Ruanjianzhuzuoquan ></Ruanjianzhuzuoquan>
      </div>  
      <div  v-show="component == 4">
        <Waikuanzhuanli ></Waikuanzhuanli>
      </div>    
        
    </el-main style="height=60vh">
  </el-container>
</el-container>
</template>
<script>
import Userx from './User.vue'
import Zhuanli from './ZhuanLiManager.vue'
import Ruanjianzhuzuoquan from './Ruanjianzhuzuoquan.vue'
import Waikuanzhuanli from './Waikuanzhuanli.vue'
import {ipcRenderer} from 'electron'
export default {
  components: {
    Userx,
    Zhuanli,
    Waikuanzhuanli,
    Ruanjianzhuzuoquan
  },
  data () {
    return {
      component: 1
    }
  },
  methods: {
    dbclick: function (row, event, column) {
      row.edit = !row.edit
    },
    changeData: function (row) {
      console.log(row)
    },
    close: function () {
      ipcRenderer.send('asynchronous-message', 'close')
    }
  }
}
</script>

<style>
  .content-box{
    display:flex;
    justify-content:'flex-start' 'nowrap';
    height:100%;
  }
  .content-aside{
    display:flex;
    flex-direction: column;
  }
  .el-header, .el-footer {
    color: #333;
    text-align: center;
  }
  
  .el-aside {
    color: #333;
    text-align: center;
    height:90vh;
  }
  
   .el-main {
    background-color: white;
    color: #333;
    text-align: center;
  }
  .el-table-add-row {
    margin-top: 10px;
    width: 100%;
    height: 34px;
    border: 1px dashed #c1c1cd;
    border-radius: 3px;
    cursor: pointer;
    justify-content: center;
    display: flex;
    line-height: 34px;
}
.el-table .cell, .el-table th {
    height: 35px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 15px;
    user-select: text;
}
</style>